<template>
  <div class="loginComponent">
    <div class="box">
      <div class="form">
        <div class="loginTitleBox">
          <div class="loginTitle justify-text">用户注册</div>
        </div>
        <!--      label-width="80px"-->
        <el-form ref="loginForm" :model="form" :rules="loginRules">
          <!--        <el-form-item label="用户名" class="justify-text">-->
          <el-form-item prop="username">
            <el-input
              v-model="form.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <!--        <el-form-item label="密码" class="justify-text">-->
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <!--        <el-form-item label="密码" class="justify-text">-->
          <el-form-item prop="rePassword">
            <el-input
              v-model="form.rePassword"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入确认密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="vcode" class="clearFix">
            <el-input
              v-model="form.vcode"
              prefix-icon="el-icon-chat-line-round"
              placeholder="请输入短信验证码"
              class="msg"
            ></el-input>
            <el-button class="msgBtn" type="primary" @click="sendMsg" :disabled="btnDisabled">{{msgBtn}}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" class="loginBtn"
            >注册
            </el-button
            >
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {
        form: {
          username: '',
          password: '',
          rePassword: '',
          vcode: '',
        },
        msgBtn: '获取验证码',
        countdown: 60,
        time: 0,
        btnDisabled: false,
        loginRules: {
          username: [
            {required: true, message: '请输入用户名', triggr: blur},
            {min: 2, max: 15, message: '长度在2到15个字符', triggr: blur}
          ],
          password: [
            {required: true, message: '请输入密码', triggr: blur},
            {min: 6, max: 20, message: '长度在6到20个字符', triggr: blur}
          ],
          rePassword: [
            {required: true, message: '请输入确认密码', triggr: blur},
            {min: 6, max: 20, message: '长度在6到20个字符', triggr: blur}
          ]
        }
      }
    },
    methods: {
      onSubmit () {
        this.$refs.loginForm.validate(async (flag) => {
          if (flag) {
            if (this.form.password !== this.form.rePassword) {
              this.$message.error('两次密码输入不一致')
              return
            }
            this.$dataUtils.userRegister(this.form).then((res) => {
              let data = res.data
              if (data.code === 200) {
                this.$message.success('注册成功！')
                this.$router.push({path: '/login'})
              } else {
                this.$message.error(data.msg)
              }
            }, (err) => {
              this.$message.error('服务器异常')
            })
          }
        })
      },
      getSeconds () {
        this.$dataUtils.getSeconds().then((res) => {
          let data = res.data
          if (data.code === 200) {
            this.time = data.data.seconds
            this.countdown = data.data.seconds
          } else {
            this.$message.error(data.msg)
            this.time = 60
          }
        }, (err) => {
          this.$message.error('服务器异常')
          this.time = 60
        })
      },
      init () {
        let msg = sessionStorage.getItem('msg')
        if (msg) {
          this.$message.error(msg)
        }
      },
      sendMsg () {
        let params = {username: this.form.username}
        this.$dataUtils.sendMsg(params).then((res) => {
          let data = res.data
          if (data.code === 200) {
            this.$message.success('发送短信成功！')
            this.getCodeTime()
          } else {
            this.$message.error(data.msg)
          }
        }, (err) => {
          this.$message.error('服务器异常')
        })
      },
      getCodeTime () {
        if (this.countdown === 0) {
          this.btnDisabled = false
          this.msgBtn = '获取验证码'
          this.countdown = this.time
        } else {
          this.btnDisabled = true
          this.msgBtn = '重新发送(' + this.countdown + ')'
          this.countdown--
          setTimeout(this.getCodeTime, 1000)
        }
      },
      getUserByUserName () {
        let params = {username: this.form.username}
        this.$dataUtils.getUserByUserName(params).then((res) => {
          let data = res.data
          if (data.code === 200) {

          } else {
            this.$message.error(data.msg)
          }
        }, (err) => {
          this.$message.error('服务器异常')
        })
      }
    }
    ,
    mounted () {
      this.init()
      this.getSeconds()
    }
  }
</script>

<style lang="less" scoped>
  .loginComponent {
    background: url('../../../assets/login/loginBackgroud.png') no-repeat;
    background-size: cover;
    height: 100%;
    position: relative;
  }

  .box {
    border-radius: 5% 5%;
    background: white;
    width: 300px;
    padding: 2%;
    position: absolute;
    left: 38%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .form {
    padding: 0 4%;
  }

  .justify-text {
    display: inline-block;
    text-align-last: justify;
  }

  .loginTitle {
    width: 140px;
    margin-bottom: 20px;
    font-size: 20px;
    color: #553f34;
  }

  .loginTitleBox {
    text-align: center;
  }

  .loginBtn {
    width: 100%;
    background: #553f34;
  }

  .msg {
    width: 60%;
  }

  .msgBtn {
    width: 35%;
    float: right;
    font-size: 12px;
    background: #948275;
    padding: 4.5%;
  }
</style>
